So in the last part, we created a amazing glorious settings menu that applies different scalability
settings, depending on which button we press.
And in this part, I'm going to get into how we can actually integrate this menu here with our main
menu so that we can navigate between them.
So the first thing that we need to do is create a couple of animations that we can use to feed between
these two menus.
So first thing, we'll just inside of our settings menu here, we're going to add an animation that's
going to call this feed in.
There's no spaces allowed feed in.
There we go.
And I'm going to add the canvas panel as you go into the track here.
And I'm just going to track the render opacity.
And what this is going to do is this is going to track the opacity of everything inside of the canvas
panel, because by default, when you add something to an animation track, it's animating.
The you know, the thing in this canvas panel under zero, as well as all of the children of that thing
in this case, that's going to be our vertical box with all of this.
That's text and the buttons and all this stuff.
So let's just start out with an opacity of one since we're fading out.
So we're going from one to zero.
So I'll just go to point to five in my timeline here and set the render opacity to zero.
And now we have this nice, quick little fade.
It's simple, but it works and it will make everything look so much more professional.
So that's all that we need in here for for now.
Next thing, we're going to go into our menu buttons blueprint.
And we're going to do the exact same thing, so we're going to add an animation, I'm just going to
call this Faid in.
So like this, I'm going to add the canvas panel from from this widget track the render opacity and
render passive is going to go from one here, and that's.
And then it's going to go down to zero.
So now we have feed animations for both of our widgets that we can play to just feed between the two
of them.
All right.
So now what we can do is hop into our rice.
We're not going to happen to the graph quite yet because first we need an event.
So let's just grab our settings button, scroll down into our details and make an on click event.
And now what we can do is start actually.
Linking this stuff together, so.
First thing, we're going to set the all of the buttons to nontaxable, just like we did up here with
our play button, so I'll just copy and paste this right here that way.
Once again, people can't accidentally hit the settings and the play button at the set at the same time
or anything like that just kind of helps us mitigate bugs and stuff.
And so then the next thing that we're going to do is we're going to play our fadeout animation.
So let's go play animation.
So this and we're going to grab that fadin animation here and in this case, we're actually going to
need to play this in reverse so that it fades out.
And so after we play that animation or start playing it, we're going to get a delay here of like point
two, or we could do point to five.
But I'm just going to go point to since that's just a little less than the amount of time it takes for
this animation to finish playing.
And after that, we were going to create a new widget.
And that widget is our settings menu.
And we're going to add this to the viewport and then what we're gonna do is we're going to have one
more delay and it's just going to be a delay of zero point zero five seconds.
And after that amount of time, we are going to remove from parent.
So what this is doing here is because we've played this fadeout animation.
Right.
We've disabled our buttons, we've played a fadeout animation, so it's not visible anymore, and we've
added a new widget.
Instead, kind of in its place, but this whole Widger blueprint, it's still technically in the game.
So the goal here is just to get rid of it, to remove it and to delete it entirely so that it's not,
you know, if you were working with much larger widgets, more complicated stuff, then this will just
help you keep things optimized, you know, only by actually having widgets active when you need them.
So that's what we're doing here, waiting until the widget has completely faded out, completely invisible,
and then we're removing it entirely from the game.
All right.
So the next thing is going to be actually, you know, making it so that our settings menu looks the
way it should.
Right.
So that the settings menu feeds in when it's created and then that we can use the backburn.
So what's happened here to our settings menu and scroll up to our event construct right here.
And this is going to be really simple.
We're just going to hit play animation and plug in our fadin and boom.
Now, as soon as we create our settings menu, it will feed in.
So we can just test this here real quick.
We go to our settings, we click it.
And it did a weird thing because I just noticed this.
All right.
So we actually I did the animation wrong.
I did the animation wrong rather than fading in, it actually fades out.
So I'm just going to replace these key frames here so that our settings, menu feed in animation actually
is fading in a little mistake, but nothing that we couldn't fix.
So now when we play this, we had settings and now we have a settings menu.
There was still something a little funky going on with our other animation, however.
So it appears this time that I did the exact I made the exact same mistake or not entirely.
I actually I played this in reverse rather than forward.
So just make sure that your feed in animation.
On both of these goes from.
Zero.
Up.
So it goes from zero opacity up to.
One opacity.
And then make sure that when you are feeding in, you are playing forward, when you're feeding out,
you are reversing.
So now now everything is as it should be.
Hopefully you caught on before I did.
But, hey, it's it's all good.
And now, as you can see, we have a very nice Faid transition.
So with all that sorted out, let's get back into our settings menu here and make it so that we can
get back to our main menu.
So let's go to our designer here.
I'll just click outside of the the animation section here so that we can just not have any animation
selected and just see all of our buttons, how we should be able to see and select our back button.
So scroll down with this and add an unclipped event.
And what we're going to do is we are going to disable all of our buttons, right.
So that this only happens once and we can't, you know, same thing that we've done before.
Um, just to.
Prevent any strange bugs from occurring.
It's going to get all of the buttons in this widget and we are going to set their visibility.
To not hit testable.
Link all these up here and now we can play our fade in animation in reverse to fade it out so that we
can then put our main menu back on screen.
So let's grab our feet in animation.
Let's play the animation.
Right here.
We're going to play it in reverse since we're feeding it out.
And now we're going to have a brief delay.
Of point to.
We are going to then create a new widget.
So it will be.
Our main menu.
Uh, main menu or its menu buttons, I believe, is the actual name of it.
It is.
Add this to the viewport and now we can actually activate the the feed in animation on this widget here.
So let's get.
Feed-In.
Let's play the animation.
And we'll link up the target just like so so that the game knows exactly where we are playing this animation,
make sure we're playing it forward and that will now work.
So just like we did in the menu button section here, where we have the delay of point zero five and
then we remove from parents, we're going to do the same thing on our settings menu.
So let's go drag off and make it delay.
Said a two point zero five.
And then remove from parent.
So now, once again, just keeping things optimized and getting rid of the settings menu, even though
it's invisible, even though we can't use any of the buttons, just getting rid of it just so it's not
cluttering anything.
So now if we play, we have a settings menu, we can adjust.
Our scalability settings, we can go back, which brings us back in here, we can go back and forth
between these two widgets, we can quit, we can play.
And there you have it, folks.
You have just created a main menu.
It's not the most advanced, but it's really all you need in a lot of scenarios.
So hopefully you're happy with what you've created.
I'm certainly happy with it.
This is basically a menu system that I use in.
A lot of my games, it's very simple and very effective, it looks professional.
You know, it's all people really need.
So hopefully you've found it very useful.
I've got one last brief video to to sum everything up, and that is it.
So I will see you in that last video.